<template>
	<!--index.wxml-->
	<view class="container">
		<view class="top">
			<image class="img" :src="$getImg('fenxiaoyi/pay_success2.png')"></image>
			<view class="text">
				<text class="p1">支付成功</text>
				<text class="p2">您已成功支付订单</text>
			</view>
		</view>
		<view class="info">
			<view class="item">
				<text class="label">订单号</text>
				<text class="value">{{detailData.orderId||'--'}}</text>
			</view>
			<view class="item">
				<text class="label">商户名称</text>
				<text class="value">{{detailData.mchntCnAbbr||'--'}}</text>
			</view>
			<view class="item">
				<text class="label">经销商名称</text>
				<text class="value">{{detailData.pharmacyName||'--'}}</text>
			</view>
			<view class="item">
				<text class="label">付款人</text>
				<text class="value">{{detailData.payerName||'--'}}</text>
			</view>
			<view class="item">
				<text class="label">支付方式</text>
				<text class="value">{{detailData.payChannel||'--'}}</text>
			</view>
			<view class="item">
				<text class="label">订单备注</text>
				<text class="value">{{detailData.orderBak||'--'}}</text>
			</view>
			<view class="item">
				<text class="label">经销商备注</text>
				<text class="value">{{detailData.payerBak||'--'}}</text>
			</view>
			<block v-if="customBak">
				<view class="item" v-for="(item,index) in customBak" :key="index">
					<text class="label">{{item[0]}}</text>
					<text class="value">{{item[1]}}</text>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detailData: {},
				customBak:[]
				// src: '../../../config/images/pay-success.jpg',
			}
		},
		onLoad() {
			uni.hideHomeButton() // 隐藏首页home按钮
			const _this = this
			const eventChannel = this.getOpenerEventChannel()
			eventChannel.on('acceptDataFromOpenerPage', function(res) {
				if (res.orderDetail.customBak) {
					let arr = res.orderDetail.customBak.split('</br>').slice(0, -1)
					let list = []
					arr.forEach((item) => {
						list.push(item.split('：'))
					});
					_this.customBak = list
				}
				_this.detailData = {
					...res.orderDetail,
					...res.data
				}
			})
		},
	}
</script>

<style>
	.container {
		/* height: 100%; */
		display: flex;
		flex-direction: column;
		align-items: center;
		box-sizing: border-box;
		background-color: #fff;
		min-height: 100vh;
		padding: 20rpx 0 80rpx;
	}

	.info {
		padding: 38rpx 0;
		width: 100%;
		margin-top: 24rpx;
	}

	.button-pay {
		height: 64rpx;
		background-color: red;
		line-height: 35rpx;
	}

	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		line-height: 76rpx;
		padding: 10rpx 10rpx;
		margin: 0 30rpx;
		border-bottom: 1px solid #eee;
	}
	
	.item:nth-last-child(1) {
		border-bottom: 0;
	}

	.label {
		min-width: 250rpx;
		font-size: 32rpx;
		color: #333;
	}

	.value {
		flex: 1;
		line-height: 32rpx;
		word-break: break-word;
		text-align: left;
		font-size: 32rpx;
		color: #333;
	}

	.top {
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	}

	.top .img {
		width: 120rpx;
		height: 120rpx;
	}

	.top .text {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.top .text .p1 {
		margin-top: 32rpx;
		font-size: 36rpx;
		color: #2BCD79;
	}

	.top .text .p2 {
		margin-top: 24rpx;
		color: #666;
		font-size: 28rpx;
	}
</style>